<template>
  <q-item class="audio-panel-item q-my-sm">
    <q-item-section
      top
      avatar
      style="min-width: 32px !important; padding-right: 5px !important"
      @mouseover="isHover = true"
      @mouseout="isHover = false"
    >
      <q-avatar @click="changeCurrntAudio">
        <q-img :src="audio!.creatorAvatar">
          <div
            v-if="currentAudio!.id === audio.id && isPlaying"
            style="padding: 0"
            class="absolute-full text-subtitle2 flex flex-center"
            no-pointer-events
          >
            <q-icon name="mdi-pause" style="font-size: 24px" />
          </div>
          <div
            v-else
            style="padding: 0"
            class="absolute-full text-subtitle2 flex flex-center"
            v-show="isHover"
            no-pointer-events
          >
            <q-icon name="mdi-play" style="font-size: 24px" />
          </div>
        </q-img>
      </q-avatar>
    </q-item-section>

    <q-item-section>
      <q-item-label>{{ audio!.creatorName }}</q-item-label>
      <!-- <q-item-label caption></q-item-label> -->
    </q-item-section>

    <q-item-section side top>
      <div class="row q-gutter-x-xs no-wrap">
        <q-chip
          class="chip"
          square
          size="10px"
          text-color="accent"
          v-if="audio!.isOriginal"
          >{{ $t('common.originalChip') }}</q-chip
        >
        <h-icon-num icon="mdi-play" :label="audio!.playCount" />
        <h-icon-num icon="mdi-star" :label="audio!.starCount" />
        <lang-chip
          style="margin-left: 5px !important"
          :code="audio!.langCode"
        />
      </div>
    </q-item-section>
  </q-item>
</template>
<script setup lang="ts">
import { ref, PropType, computed } from 'vue';
import Audio from 'src/models/Audio';
import HIconNum from '../utils/HIconNum.vue';
import LangChip from '../LanguageChip.vue';
import { useVideoStore } from 'src/stores/video-store';

const props = defineProps({
  audio: {
    type: Object as PropType<Audio>,
    required: true,
  },
});
const videoStore = useVideoStore();
const currentAudio = computed(() => videoStore.currentAudio);
const isPlaying = computed(() => videoStore.isPlaying);
const isHover = ref(false);
function changeCurrntAudio() {
  if (currentAudio.value!.id !== props.audio.id) {
    videoStore.setCurrentAudio(props.audio);
  } else {
    if (isPlaying.value) {
      videoStore.pauseCurrentVideo();
    } else {
      videoStore.playCurrentVideo();
    }
  }
}
</script>
<style lang="sass" scoped>

.audio-panel-item
  background-color: #242424
  height: 60px
  min-width: 128px
  .chip
    padding: 0px 6px
    cursor: default
    margin: 0px
    height: 18px
</style>
